<template>
  <div class="pageStyle">
    <div style="display: flex;">
      <ElScrollbar class="map-left">
        <!-- 面状航线概览 -->
        <div class="airline-header mg-b-10">
          <p class="fs-16 fw-bold" style="margin-left:8px">面状航线概览</p>
          <ElButton class="btn" style="margin-right: 8px;" link type="primary" @click="handleBack()">返回</ElButton>
        </div>
        <div class="airline-distance">
          <div class="flex-1">
            <p class="fs-14" style="font-weight: 800; line-height: 24px">{{ form.areas.toFixed(2) }}m²</p>
            <p style="font-size: 13px;line-height: 24px;color: #606266;">面积</p>
          </div>
          <div class="flex-1">
            <p class="fs-14" style="font-weight: 800; line-height: 24px">
              {{ form.totalDistance.toFixed(1) }}m
            </p>
            <p style="font-size: 13px;line-height: 24px;color: #606266;">航线总长度</p>
          </div>
          <div class="flex-1">
            <p class="fs-14" style="font-weight: 800; line-height: 24px">{{ form.executeTime ?
              form.executeTime : 0 }}
              <!-- executeTime_formatTime -->
            </p>
            <p style="font-size: 13px;line-height: 24px;color: #606266;">预计总时间</p>
          </div>
          <div class="flex-1">
            <p class="fs-14" style="font-weight: 800; line-height: 24px">{{ form.totalPhotos }}</p>
            <p style="font-size: 13px;line-height: 24px;color: #606266;">总照片数</p>
          </div>
        </div>
        <div class="airline-img mg-b-10">
          <div class="airline-setting flex-row-center" style="margin-bottom: 8px;">
            <p class="fs-14 fw-5">航线名称</p>
            <p class="text" style="font-size: 12px; margin-right: 8px;cursor: pointer;color: #409EFF;"
              v-if="!showEditAirlineName" @click="editAirlineName">
              编辑
            </p>
            <section v-if="showEditAirlineName">
              <span class="text" style="font-size: 12px; margin-right: 8px;cursor: pointer;color: #006be6;"
                @click="cancelAirlineNameEdit">取消</span>
              <span class="text" style="font-size: 12px; margin-right: 8px;cursor: pointer;color: #006be6;"
                @click="saveAirlineName" :class="{ 'disabled-button': !isAirlineNameValid }"
                :disabled="!isAirlineNameValid">确定</span>
            </section>
          </div>
          <div v-if="!showEditAirlineName">
            <ElTooltip effect="light" :content="ruleForm.airlineNameData" placement="top">
              <p class="fs-16 fw-bold"
                style="text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; line-height: 1.5em; max-height: 3em;">
                {{ ruleForm.airlineNameData }}</p>
            </ElTooltip>
          </div>
          <div v-if="showEditAirlineName" style="position: relative;">
            <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules">
              <ElFormItem label="" prop="airlineNameData">
                <!-- v-model="airlineNameData"  -->
                <ElInput v-model="ruleForm.airlineNameData" style="width: 100%;" maxlength="20" show-word-limit
                  type="textarea" autosize placeholder="请输入航线名称" @keydown.enter.prevent="handleEnterKey"
                  @keydown.space.prevent @input="debouncedHandleAirlineNameInput" @keydown="handleAirlineNameKeydown">
                </ElInput>
              </ElFormItem>
            </ElForm>
          </div>
        </div>
        <div class="flex-row-center airline-fly">
          <p class="fs-14 fw-5">参考起飞点</p>
          <p class="flex-row-center text fs-14">
            <img src="/static/flay.png" alt="" />
            <span v-show="flayoneShow" @click="oneSetTakeoffMode()">设置参考起飞点</span>
          <section v-if="!flayoneShow">
            <span v-if="!isResettingTakeoff" @click="changeflayShow(1)">重设起飞点</span>
            <span v-if="isResettingTakeoff" @click="changeflayShow(2)">取消设置</span>
          </section>
          </p>
        </div>
        <!-- 选择镜头 -->
        <div class="airline-img mg-b-10">
          <p class="fs-14 fw-5">选择镜头</p>
          <div class="btn">
            <p :class="form.wideTypeSupport == 1 ? 'activeBtn' : ''" @click="set_TypeSupport(1)"
              style="cursor: pointer;">
              <!-- typeSupport_list -->
              <span v-if="isvisable">可见光</span>
              <span v-if="!isvisable">广角</span>
            </p>
            <p :class="form.irTypeSupport == 1 ? 'activeBtn' : ''" @click="set_TypeSupport(2)" style="cursor: pointer;">
              <span>红外</span>
            </p>
          </div>
        </div>
        <!-- 航线飞行速度 -->
        <!-- <div class="airline-img mg-b-10"> -->
        <!-- <div class="airline-setting flex-row-center">
            <p class="fs-14 fw-5">航线飞行速度</p>
            <p class="text">
              <ElInput v-model.number="form.speed" v-decimal-input="{ type: 'number', decimals: 2, min: 1, max: 15 }"
                style="width: 72px" @change="handleBlur($event, 'speed')"></ElInput>
              <span class="m-l-5">m/s</span>
            </p>
          </div>
          <div class="airline-slider">
            <img style="margin: 0" src="/static/delete.png" @click="speedClick('-')" :disabled="form.speed <= 1"
              alt="" />
            <ElSlider v-model.number="form.speed" :min="1" :max="15">
            </ElSlider>
            <img style="margin: 0" src="/static/add.png" @click="speedClick('+')" :disabled="form.speed >= 15" alt="" />
          </div> -->
        <!-- </div> -->
        <!-- 采集方式 -->
        <div class="airline-img mg-b-10">
          <p class="fs-14 fw-5">采集方式</p>
          <div class="btnF">
            <p :class="form.collectType == 0 ? 'activeBtnF' : ''" @click="form.collectType = 0">
              正射采集
            </p>
            <!-- <p :class="form.collectType == 1 ? 'activeBtnF' : ''" @click="form.collectType = 1">
              倾斜采集
            </p> -->
          </div>
        </div>
        <!-- 主航线角度 -->
        <div class="airline-img mg-b-10">
          <div class="airline-setting flex-row-center">
            <p class="fs-14 fw-5">主航线角度</p>
            <p class="text">
              <ElInput v-model="form.direction"
                v-decimal-input="{ type: 'number', decimals: 0, min: flightAngleNumber.min, max: flightAngleNumber.max }"
                @input="(val) => fnumberinput('direction', val, flightAngleNumber)"
                @change="(val) => fnumberchange('direction', val, flightAngleNumber)" style="width: 72px" />
              <span class="m-l-5" style="font-size: 12px">°</span>
            </p>
          </div>
          <div class="airline-slider">
            <img style="margin: 0" src="/static/delete.png" @click="formValueClick('direction', '-', flightAngleNumber)"
              :disabled="form.direction <= flightAngleNumber.min" alt="" />
            <ElSlider v-model="form.direction" :min="flightAngleNumber.min" :max="flightAngleNumber.max"
              @input="(val) => fnumberinput('direction', val, flightAngleNumber)"
              @change="(val) => fnumberchange('direction', val, flightAngleNumber)">
            </ElSlider>
            <img style="margin: 0" src="/static/add.png" @click="formValueClick('direction', '+', flightAngleNumber)"
              :disabled="form.direction >= flightAngleNumber.max" alt="" />
          </div>
        </div>
        <!-- 航线高度模式 -->
        <div class="airline-img mg-b-10">
          <p class="fs-14 fw-5">航线高度模式</p>
          <div class="btnF zbtnF">
            <p :class="form.heightMode == 0 ? 'activeBtnF' : ''" @click="getheightmode(0)">
              <span>海拔高度</span>
            </p>
            <p :class="form.heightMode == 1 ? 'activeBtnF' : ''" @click="getheightmode(1)">
              <span>相对起飞点高度</span>
            </p>
            <p style="border-left: none;" :class="form.heightMode == 2 ? 'activeBtnF' : ''" @click="getheightmode(2)">
              <span>相对地形高度</span>
            </p>
          </div>
          <div style="display: flex">
            <!-- <section style="width: 70%;">
              <img src="/static/facebg1.png" style="width: 100%;height: 100%;" v-if="form.heightMode == 0">
              <img src="/static/facebg2.png" style="width: 100%;height: 100%;" v-if="form.heightMode == 1">
              <img src="/static/facebg3.png" style="width: 100%;height: 100%;" v-if="form.heightMode == 2">
            </section> -->
            <!-- <section style="width: 30%;">
              <div class="airline-slider" style="display: flex;flex-direction: column;align-items: flex-end;">
                <p class="text" style="width:85px;margin-bottom: 8px;" @click="heightClick('-100')">-100</p>
                <p class="text" style="width:85px;margin-bottom: 8px;" @click="heightClick('-10')">-10</p>
                <p style="margin-bottom: 8px;">
                  <ElInput v-model="form.height" v-decimal-input="{ type: 'number', decimals: 2, min: 25, max: 1500 }"
                    style="width: 70px;height:24px ;margin-left: 5px;border-radius: 2px;"></ElInput>
                  <span class="m-l-5">m</span>
                </p>
                <p class="text" style="width:85px;margin-bottom:8px;" @click="heightClick('+10')">+10</p>
                <p class="text" style="width:85px;" @click="heightClick('+100')">+100</p>
              </div>
            </section> -->
          </div>
          <!-- <section style="margin-top: 8px;" v-if="form.heightMode == 2">
            <p class="fs-14">
              仿地文件管理
            </p>
            <p class="fs-14 height-btn">全球高程数据</p>
            <p style="font-size: 12px;color: #f90;">全球高程数据仅供参考，请注意飞行安全。</p>
          </section> -->
          <!-- </div> -->
          <!-- 安全起飞高度 -->
          <!-- <div class="pd-10 mg-b-10" style="margin: 8px;background: #fff;border: 1px solid #DCDFE6; border-radius: 4px;"> -->
          <div class="airline-setting flex-row-center">
            <p class="fs-14 fw-5">航线高度</p>
            <p class="text">
              <ElInput v-model="form.height" @change="(val) => fnumberchange('height', val, { min: 25, max: 1500 })"
                style="width: 72px" :maxlength="4"></ElInput>
              <!-- @input="(val) => fnumberinput('height', val, { min: 25, max: 1500 })" -->
              <span class="m-l-5">m</span>
            </p>
          </div>
          <div class="airline-slider">
            <img style="margin: 0" src="/static/delete.png"
              @click="formValueClick('height', '-', { min: 25, max: 1500 })" :disabled="form.height <= 25" alt="" />
            <ElSlider v-model="form.height" :min="25" :max="1500"
              @input="(val) => fnumberinput('height', val, { min: 25, max: 1500 })"
              @change="(val) => fnumberchange('height', val, { min: 25, max: 1500 })">
            </ElSlider>
            <img style="margin: 0" src="/static/add.png" @click="formValueClick('height', '+', { min: 25, max: 1500 })"
              :disabled="form.height >= 1500" alt="" />
          </div>
          <div class="airline-setting flex-row-center">
            <p class="fs-14 fw-5">安全起飞高度</p>
            <p class="text">
              <ElInput v-model="form.takeOffSecurityHeight" :maxlength="4"
                v-decimal-input="{ type: 'number', decimals: 1, min: flayheightNumber.min, max: flayheightNumber.max }"
                style="width: 72px" @change="(val) => fnumberchange('takeOffSecurityHeight', val, flayheightNumber)">
              </ElInput>
              <!-- @input="(val) => fnumberinput('takeOffSecurityHeight', val, flayheightNumber)" -->
              <span class="m-l-5">m</span>
            </p>
          </div>
          <div class="airline-slider">
            <img style="margin: 0" src="/static/delete.png"
              @click="formValueClick('takeOffSecurityHeight', '-', flayheightNumber)"
              :disabled="form.takeOffSecurityHeight <= flayheightNumber.min" alt="" />
            <ElSlider v-model="form.takeOffSecurityHeight" :min="flayheightNumber.min" :max="flayheightNumber.max"
              @input="(val) => fnumberinput('takeOffSecurityHeight', val, flayheightNumber)"
              @change="(val) => fnumberchange('takeOffSecurityHeight', val, flayheightNumber)">
            </ElSlider>
            <img style="margin: 0" src="/static/add.png"
              @click="formValueClick('takeOffSecurityHeight', '+', flayheightNumber)"
              :disabled="form.takeOffSecurityHeight >= flayheightNumber.max" alt="" />
          </div>
          <section v-if="form.collectType == 1">
            <div class="airline-setting flex-row-center">
              <p class="fs-14 fw-5">云台俯仰角度</p>
              <p class="text">
                <ElInput v-model.number="form.gimbalPitchAngle"
                  v-decimal-input="{ type: 'number', decimals: 1, min: pitchmodeNumber.min, max: pitchmodeNumber.max }"
                  @change="handleBlur($event, 'gimbalPitchAngle')" style="width: 72px"></ElInput>
                <span class="m-l-5">°</span>
              </p>
            </div>
            <div class="airline-slider">
              <img style="margin: 0" src="/static/delete.png" @click="pitchmodeClick('-')"
                :disabled="form.gimbalPitchAngle <= pitchmodeNumber.min" alt="" />
              <ElSlider v-model="form.gimbalPitchAngle" :min="pitchmodeNumber.min" :max="pitchmodeNumber.max">
              </ElSlider>
              <img style="margin: 0" src="/static/add.png" @click="pitchmodeClick('+')"
                :disabled="form.gimbalPitchAngle >= pitchmodeNumber.max" alt="" />
            </div>
          </section>
          <div class="airline-setting flex-row-center">
            <p class="fs-14 fw-5">全局航线速度</p>
            <p class="text">
              <ElInput v-model="form.autoFlightSpeed"
                v-decimal-input="{ type: 'number', decimals: 1, min: speedNumber.min, max: speedNumber.max }"
                @input="(val) => fnumberinput('autoFlightSpeed', val, speedNumber)"
                @change="(val) => fnumberchange('autoFlightSpeed', val, speedNumber)" style="width: 72px">
              </ElInput>
              <span class="m-l-5" style="font-size: 12px">m/s</span>
            </p>
          </div>
          <div class="airline-slider">
            <img style="margin: 0" src="/static/delete.png" @click="formValueClick('autoFlightSpeed', '-', speedNumber)"
              :disabled="form.autoFlightSpeed <= speedNumber.min" alt="" />
            <ElSlider v-model="form.autoFlightSpeed" :min="speedNumber.min" :max="speedNumber.max"
              @input="(val) => fnumberinput('autoFlightSpeed', val, speedNumber)"
              @change="(val) => fnumberchange('autoFlightSpeed', val, speedNumber)"></ElSlider>
            <img style="margin: 0" src="/static/add.png" @click="formValueClick('autoFlightSpeed', '+', speedNumber)"
              :disabled="form.autoFlightSpeed >= speedNumber.max" alt="" />
          </div>
        </div>
        <!-- 无人机完成动作 -->
        <div class="airline-img mg-b-20" v-if="form.ather == '0'"
          style="display: flex;align-items: center;justify-content: space-between;">
          <p class="fs-14 fw-5">高程优化</p>
          <ElSwitch v-model="form.elevationOptimizeEnable" />
        </div>
        <!-- 无人机完成动作 -->
        <div class="airline-img mg-b-20">
          <p class="fs-14 fw-5">无人机完成动作</p>
          <ElSelect class="select" v-model="form.finishAction" placeholder="请选择">
            <ElOption v-for="item in destinationtypeList" :key="item.value" :label="item.label" :value="item.value" />
          </ElSelect>
        </div>

        <!-- <div class="pd-10 mg-b-10" style="margin: 8px;background: #fff;border: 1px solid #DCDFE6; border-radius: 4px;">
          <div @click="advancedSetting = !advancedSetting" :class="advancedSetting ? 'pd-b-10 mg-b-10' : ''"
            style="justify-content:center;cursor: pointer;" class="flex-row-center">
            <p class="fs-14 fw-5" style="width: 100%;text-align: center;">高级设置</p>
            <section style="float: right;width: 20px;height: 20px;">
              <el-icon v-if="advancedSetting" style="width: 20px;height: 20px;">
                <ArrowUpBold />
              </el-icon>
              <el-icon v-else style="width: 20px;height: 20px;">
                <ArrowDownBold />
              </el-icon>
            </section>
          </div>
          <div v-if="advancedSetting">
            <div class="airline-setting flex-row-center">
              <p class="fs-14 fw-5">起飞速度</p>
              <p class="text">
                <ElInput v-model="form.globalTransitionalSpeed"
                  v-decimal-input="{ type: 'number', decimals: 1, min: takeoffspeedNumber.min, max: takeoffspeedNumber.max }"
                  @blur="handleBlur($event, 'globalTransitionalSpeed')" style="width: 52px"></ElInput>
                <span class="m-l-5" style="font-size: 12px">m/s</span>
              </p>
            </div>
            <div class="airline-slider">
              <img style="margin: 0" src="/static/delete.png" @click="globalTransitionalClick('-')"
                :disabled="form.globalTransitionalSpeed <= takeoffspeedNumber.min" alt="" />
              <ElSlider v-model="form.globalTransitionalSpeed" :min="takeoffspeedNumber.min"
                :max="takeoffspeedNumber.max">
              </ElSlider>
              <img style="margin: 0" src="/static/add.png" @click="globalTransitionalClick('+')"
                :disabled="form.globalTransitionalSpeed >= takeoffspeedNumber.max" alt="" />
            </div>
            <div class="airline-setting flex-row-center">
              <p class="fs-14 fw-5" v-if="form.heightMode == 0">被摄面海拔高度</p>
              <p class="fs-14 fw-5" v-if="form.heightMode == 1">被摄面相对起飞点高度</p>
              <p class="text" v-if="form.heightMode !== 2">
                <ElInput v-model="form.globalShootHeight"
                  v-decimal-input="{ type: 'number', decimals: 1, min: flayheightNumber.min, max: flayheightNumber.max }"
                  @blur="handleBlur($event, 'globalShootHeight')" style="width: 52px"></ElInput>
                <span class="m-l-5" style="font-size: 12px">m/s</span>
              </p>
            </div>
            <div class="airline-slider" v-if="form.heightMode !== 2">
              <img style="margin: 0" src="/static/delete.png" @click="takeoffspeedClick('-')"
                :disabled="form.globalShootHeight <= takeoffspeedNumber.min" alt="" />
              <ElSlider v-model="form.globalShootHeight" :min="flayheightNumber.min" :max="flayheightNumber.max">
              </ElSlider>
              <img style="margin: 0" src="/static/add.png" @click="takeoffspeedClick('+')"
                :disabled="form.globalShootHeight >= flayheightNumber.max" alt="" />
            </div>
            <div class="airline-setting flex-row-center">
              <p class="fs-14 fw-5">旁向重叠率</p>
              <p class="text">
                <ElInput v-model="form.overlapW"
                  v-decimal-input="{ type: 'number', decimals: 0, min: sideOverlapNumber.min, max: sideOverlapNumber.max }"
                  @blur="handleBlur($event, 'overlapW')" style="width: 52px"></ElInput>
                <span class="m-l-5" style="font-size: 12px">%</span>
              </p>
            </div>
            <div class="airline-slider">
              <img style="margin: 0" src="/static/delete.png" @click="sideOverlapClick('-')"
                :disabled="form.overlapW <= sideOverlapNumber.min" alt="" />
              <ElSlider v-model="form.overlapW" :min="sideOverlapNumber.min" :max="sideOverlapNumber.max"></ElSlider>
              <img style="margin: 0" src="/static/add.png" @click="sideOverlapClick('+')"
                :disabled="form.overlapW >= sideOverlapNumber.max" alt="" />
            </div>
            <section v-if="form.ather == '1'">
              <div class="airline-setting flex-row-center">
                <p class="fs-14 fw-5">旁向重叠率(倾斜)</p>
                <p class="text">
                  <ElInput v-model.number="form.sideOverlapTilt" style="width: 52px"></ElInput>
                  <span class="m-l-5" style="font-size: 12px">%</span>
                </p>
              </div>
              <div class="airline-slider">
                <img style="margin: 0" src="/static/delete.png" @click="sideOverlapTiltClick('-')"
                  @blur="handleBlur($event, 'sideOverlapTilt')"
                  :disabled="form.sideOverlapTilt <= sideOverlapNumber.min" alt="" />
                <ElSlider v-model="form.sideOverlapTilt" :min="sideOverlapNumber.min" :max="sideOverlapNumber.max">
                </ElSlider>
                <img style="margin: 0" src="/static/add.png" @click="sideOverlapTiltClick('+')"
                  :disabled="form.sideOverlapTilt >= sideOverlapNumber.max" alt="" />
              </div>
            </section>
            <div class="airline-setting flex-row-center">
              <p class="fs-14 fw-5">航向重叠率</p>
              <p class="text">
                <ElInput v-model="form.overlapH"
                  v-decimal-input="{ type: 'number', decimals: 0, min: sideOverlapNumber.min, max: sideOverlapNumber.max }"
                  @blur="handleBlur($event, 'overlapH')" style="width: 52px"></ElInput>
                <span class="m-l-5" style="font-size: 12px">%</span>
              </p>
            </div>
            <div class="airline-slider">
              <img style="margin: 0" src="/static/delete.png" @click="yawOverlapClick('-')"
                :disabled="form.overlapH <= sideOverlapNumber.min" alt="" />
              <ElSlider v-model="form.overlapH" :min="sideOverlapNumber.min" :max="sideOverlapNumber.max"></ElSlider>
              <img style="margin: 0" src="/static/add.png" @click="yawOverlapClick('+')"
                :disabled="form.overlapH >= sideOverlapNumber.max" alt="" />
            </div>
            <section v-if="form.ather == '1'">
              <div class="airline-setting flex-row-center">
                <p class="fs-14 fw-5">航向重叠率(倾斜)</p>
                <p class="text">
                  <ElInput v-model.number="form.yawOverlapTilt" style="width: 52px"></ElInput>
                  <span class="m-l-5" style="font-size: 12px">%</span>
                </p>
              </div>
              <div class="airline-slider">
                <img style="margin: 0" src="/static/delete.png" @click="yawOverlapTiltClick('-')"
                  :disabled="form.yawOverlapTilt <= sideOverlapNumber.min" alt="" />
                <ElSlider v-model="form.yawOverlapTilt" :min="sideOverlapNumber.min" :max="sideOverlapNumber.max">
                </ElSlider>
                <img style="margin: 0" src="/static/add.png" @click="yawOverlapTiltClick('+')"
                  :disabled="form.yawOverlapTilt >= sideOverlapNumber.max" alt="" />
              </div>
            </section>
            <div class="airline-setting flex-row-center">
              <p class="fs-14 fw-5">边距</p>
              <p class="text">
                <ElInput v-model="form.margin"
                  v-decimal-input="{ type: 'number', decimals: 0, min: sideDistanceNumber.min, max: sideDistanceNumber.max }"
                  @blur="handleBlur($event, 'margin')" style="width: 52px"></ElInput>
                <span class="m-l-5" style="font-size: 12px">m</span>
              </p>
            </div>
            <div class="airline-slider">
              <img style="margin: 0" src="/static/delete.png" @click="sideDistanceClick('-')"
                :disabled="form.margin <= sideDistanceNumber.min" alt="" />
              <ElSlider v-model="form.margin" :min="sideDistanceNumber.min" :max="sideDistanceNumber.max">
              </ElSlider>
              <img style="margin: 0" src="/static/add.png" @click="sideDistanceClick('+')"
                :disabled="form.margin >= sideDistanceNumber.max" alt="" />
            </div>
            <p class="fs-14 fw-5 mg-b-10">拍照模式</p>
            <ElSelect class="select" v-model="form.shootType" placeholder="请选择">
              <ElOption v-for="item in photomodeList" :key="item.value" :label="item.label" :value="item.value" />
            </ElSelect>

            <div class="airline-img" style="padding: 0;margin:  8px 0;border: none;" v-if="form.collectType == 0">
              <p class="fs-14 fw-5 flex-row-center justify-between" style="margin-bottom: 10px;"> <span>自定义相机角度</span>
                <ElSwitch v-model="form.photoangle" />
              </p>
              <section v-if="form.photoangle">
                <p class="fs-14 fw-5"> <span>飞行器偏航角度</span> </p>
                <div class="btnF border-bottom">
                  <p :class="form.waypointHeadingMode == 0 ? 'activeBtnF' : ''" @click="form.waypointHeadingMode = 0">
                    <span>沿航线方向</span>
                  </p>
                  <p :class="form.waypointHeadingMode == 1 ? 'activeBtnF' : ''" @click="form.waypointHeadingMode = 1">
                    <span>自定义</span>
                  </p>
                </div>
                <p class="text" style="text-align: right;" v-if="form.waypointHeadingMode == 1">
                  <ElInput v-model="form.waypointHeadingAngle"
                    v-decimal-input="{ type: 'number', decimals: 0, min: yawNumber.min, max: yawNumber.max }"
                    @blur="handleBlur($event, 'waypointHeadingAngle')" style="width: 52px"></ElInput>
                  <span class="m-l-5" style="font-size: 12px">°</span>
                </p>
                <div class="airline-slider" v-if="form.waypointHeadingMode == 1">
                  <img style="margin: 0" src="/static/delete.png" @click="yawClick('-')"
                    :disabled="form.waypointHeadingAngle <= yawNumber.min" alt="" />
                  <ElSlider v-model="form.waypointHeadingAngle" :min="yawNumber.min" :max="yawNumber.max"></ElSlider>
                  <img style="margin: 0" src="/static/add.png" @click="yawClick('+')"
                    :disabled="form.waypointHeadingAngle >= yawNumber.max" alt="" />
                </div>
              </section>
            </div>
            <div class="airline-img" style="padding: 0;margin:  8px 0;border: none;" v-if="form.ather == '1'">
              <p class="fs-14 fw-5 flex-row-center justify-between" style="margin-bottom: 10px;">
                <span>倾斜航线速度单独设置</span>
                <ElSwitch v-model="form.tiltSpeedBtn" />
              </p>
              <div class="airline-setting flex-row-center" v-if="form.tiltSpeedBtn">
                <p class="fs-14 fw-5">航线速度(倾斜)</p>
                <p class="text">
                  <ElInput v-model="form.tiltSpeed"
                    v-decimal-input="{ type: 'number', decimals: 1, min: tiltSpeedNumber.min, max: tiltSpeedNumber.max }"
                    @blur="handleBlur($event, 'tiltSpeed')" style="width: 52px"></ElInput>
                  <span class="m-l-5" style="font-size: 12px">m/s</span>
                </p>
              </div>
              <div class="airline-slider" v-if="form.tiltSpeedBtn">
                <img style="margin: 0" src="/static/delete.png" @click="tiltSpeedClick('-')"
                  :disabled="form.tiltSpeed <= tiltSpeedNumber.min" alt="" />
                <ElSlider v-model="form.tiltSpeed" :min="tiltSpeedNumber.min" :max="tiltSpeedNumber.max"></ElSlider>
                <img style="margin: 0" src="/static/add.png" @click="tiltSpeedClick('+')"
                  :disabled="form.tiltSpeed >= tiltSpeedNumber.max" alt="" />
              </div>
            </div>
          </div>
        </div> -->
        <div class="pd-10">
          <p class="backbtn" link type="primary" @click="saveAllEdit(ruleFormRef)">保存并退出
            <!-- v-if="route.query.id" -->
          </p>
          <!-- <p class="backbtn" link type="primary" v-else @click="saveAll()">保存并退出</p> -->
        </div>
      </ElScrollbar>
      <mapPosition ref="mapRef" style="width: 100%" :lineform="form" :flayShow="flayShow"
        :flightaltitude="form.flightaltitude" :takeOffSecurityHeight="form.takeOffSecurityHeight"
        :takeOffRefPoint="form.takeOffRefPoint" :coordinatePointReqList="form.coordinatePointReqList"
        :drawDefaultRoute="drawDefaultRoute" :airlineList="airlineList" @delSetTakeoffMode="setTakeoffMode"
        @gggallData="getallData" @totalDistance="gettotalDistance" @distanceArray="getdistanceArray" @area="getArea"
        @getstartMarker="getstartMarker" />
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineProps,
  computed,
  getCurrentInstance,
  nextTick,
} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {
  ElInput,
  ElButton,
  ElScrollbar,
  ElCheckboxGroup,
  ElCheckbox,
  ElSelect,
  ElOption,
  ElRadioGroup,
  ElRadio,
  ElSlider,
  ElTooltip,
  ElMessage,
  ElMessageBox,
  ElSwitch,
  ElIcon,
  ElForm,
  ElFormItem
} from "element-plus";
import algorithmview from "./algorithmview.vue";
import shoutview from "./shoutview.vue";
import waypointaction from "./waypointaction.vue";
import mapPosition from "./mapface2.vue";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
import { router } from "#/router";

import {
  add,
  editAirline,
  getAirlineById,
  addPlanarAirline,
  updatePlanarAirline,
  getAirlineByAirlineCode,
  getPlanarAirlineById,
  editName
} from "#/api/task/airline";
import { adjustValue } from "./mapdata";
// import mapPosition from './mapLine.vue';
import {
  yawList,
  typeList,
  stopenrouteList,
  getalgorithmList,
  getwayList,
  destinationtypeList,
  photomodeList,
} from "./datalist";

const props = defineProps({ showSearch: Boolean });
const allData = ref([{ points: [] }]);
const drawDefaultRoute = ref([]); //默认航线数据
const ruleFormRef = ref(null);
const totalTime = ref(0); //总飞行时间
const advancedSetting = ref(false); //高级设置
const route = useRoute();


// 航线名称修改这一块
// =============================================================================================
const showEditAirlineName = ref(false); // 是否显示编辑航线名称
// console.log(route.query.airlineName)
// 添加此方法来处理编辑航线名称的逻辑
const editAirlineName = () => {
  // 编辑前先保存当前的航线名称，用于取消时恢复
  ruleForm.airlineNameData = form.airlineName;
  showEditAirlineName.value = true;
};
const ruleForm = reactive({
  airlineNameData: route.query.airlineName,
});
const rules = reactive({
  airlineNameData: [
    { required: true, message: "请输入航线名称", trigger: "blur" },
    { min: 1, max: 20, message: "请输入最多20字", trigger: "blur" },
  ],
});
// 保存编辑的航线名称
const saveAirlineNameEdit = async () => {
  try {
    const params = {
      id: route.query.id,
      airlineName: ruleForm.airlineNameData,
      airlineType: route.query.airlineType,
      brandId: form.brandId,
      seriesId: form.seriesId,
      modelId: form.modelId,
    };

    const response = await editName(params);

    // 检查响应状态
    if (response.code === 200) {
      ElMessage.success("航线名称保存成功");
      showEditAirlineName.value = false;
      form.airlineName = ruleForm.airlineNameData;
    } else {
      // 接口返回业务错误
      // ruleForm.airlineNameData = route.query.airlineName
      // form.airlineName = route.query.airlineName
      // ruleForm.airlineNameData = form.airlineName
      const errorMsg = response.message || response.msg || "保存失败";
      ElMessage.error(errorMsg);
    }
  } catch (err) {
    // 处理HTTP错误 ╮(╯▽╰)╭
    if (err.response) {
      const { status, data } = err.response;
      let errorMsg = "操作失败";

      if (status === 500) {
        errorMsg = data?.message || data?.msg || "服务器内部错误";
      } else if (status === 404) {
        errorMsg = "接口不存在";
      } else if (status === 403) {
        errorMsg = "权限不足";
      } else if (status === 401) {
        errorMsg = "未授权访问";
      } else {
        errorMsg = data?.message || data?.msg || `请求失败 (${status})`;
      }

      ElMessage.error(errorMsg);
    } else if (err.request) {
      // 网络错误
      ElMessage.error("网络连接失败，请检查网络设置");
    } else {
      // 其他错误
      ElMessage.error(err.message || "操作失败");
    }
  }
};
// 添加计算属性来检查航线名称是否有效（不为空且不全为空格）
const isAirlineNameValid = computed(() => {
  return ruleForm.airlineNameData && ruleForm.airlineNameData.trim() !== "";
});
// 保存航线名称的方法
const saveAirlineName = async () => {
  // 检查航线名称是否有效
  if (!isAirlineNameValid.value) {
    ElMessage({
      type: "error",
      message: "航线名称不能为空",
    });
    return;
  }

  // 根据是否有id来决定调用哪个保存接口
  if (route.query.id) {
    // 有id，调用编辑接口
    await saveAirlineNameEdit();
  }
};

// 取消航线名称编辑
const cancelAirlineNameEdit = () => {
  // 恢复原来的航线名称
  ruleForm.airlineNameData = form.airlineName;
  showEditAirlineName.value = false;
};
// 防抖函数
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction (...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};
// 处理回车键事件，防止换行
const handleEnterKey = (event) => {
  // 阻止默认的换行行为
  event.preventDefault();
  // 可以选择在这里触发保存或其他操作
  // 例如：失去焦点或触发保存
  event.target.blur();
};
// 防抖版本的输入处理函数
const debouncedHandleAirlineNameInput = debounce((value) => {
  // 去除所有空格和换行符
  const cleanedValue = value.replace(/[\s]/g, "");
  if (cleanedValue !== value) {
    ruleForm.airlineNameData = cleanedValue;
  }
}, 100);

// 处理航线名称按键事件，阻止空格和换行符输入
const handleAirlineNameKeydown = (event) => {
  // 阻止空格键（包括普通空格、制表符等）
  if (event.key === " " || event.key === "Spacebar" || event.keyCode === 32) {
    event.preventDefault();
    return false;
  }
  // 阻止换行键
  if (event.key === "Enter" || event.keyCode === 13) {
    event.preventDefault();
    return false;
  }
};
// =============================================================================================
// 格式化飞行时间为分钟加秒钟格式
const formattedTotalTime = computed(() => {
  if (!totalTime.value || totalTime.value <= 0) {
    return "0min0s";
  }

  const totalSeconds = Math.round(totalTime.value);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  return `${minutes}min${seconds}s`;
});

// 记录当前航点索引
const waypointIndex = ref(0);
const obj = {
  wayPointName: "",
  positionType: 0,
  longitude: "",
  latitude: "",
  height: 0,
  waypointSpeed: 10,
  imageFormat: 0,
  attitudeHead: 0,
  megaphoneOperate: {
    megaphoneOperateLoop: 0,
    megaphoneType: 0,
    megaphoneOperateFile: "",
    text: "",
    playVolume: 0,
  },
};
const airlineList = ref([]);
const shoutList = ref();
const distanceArray = ref([]);
const form = reactive({
  airlineName: route.query.airlineName,
  airlineType: 1,
  areas: 0, //区域面积
  autoFlightSpeed: 8, //全局航线速度
  collectType: 0, //采集类型 0正射采集 1倾斜采集
  coordinatePointReqList: [ //航点集合
  ],
  direction: 0, //主航线角度
  elevationOptimizeEnable: 0, //是否开启高程优化海拔优化 0不优化 1优化
  executeTime: 0, //预计执行时间
  finishAction: 0, //完成动作	//  * 0自动返航  * 1返回航线到起始点悬停   * 2退出航线模式 * 3原地降落
  gimbalPitchAngle: 0, //云台俯仰角度
  globalShootHeight: 120, //被摄面海拔高度
  globalTransitionalSpeed: 8, //起飞速度
  height: 120, //飞行高度
  heightMode: 0, //航线高度模式  1相对起飞点高度 2相对地面高度 0海拔高度
  irTypeSupport: 0, //红外类型支持 0不支持 1支持
  margin: 0, //边距
  overlapH: 80, //航向重叠率
  overlapW: 70, //旁向重叠率
  shootType: 0, //拍照模式  * 0 等时间拍照* 1 等距离拍照
  takeOffRefPoint: "", //起飞点参考点
  takeOffSecurityHeight: 120, //安全起飞高度
  totalDistance: 0, //总距离(长度)
  totalPhotos: 0, //总照片数
  wayPoints: [],
  waypointHeadingAngle: 0, //航点偏航角度
  waypointHeadingMode: 0, //飞行器偏航角模式 0沿航线方向 1手动控制
  wideTypeSupport: 1, //广角支持 0不支持 1支持
  speed: 15, //飞行速度
  brandId: '',
  seriesId: '',
  modelId: '',
});

const form_direction = ref(form.direction)
const form_height = ref(form.height)
const form_takeOffSecurityHeight = ref(form.takeOffSecurityHeight)
const form_autoFlightSpeed = ref(form.autoFlightSpeed)
const flayheightNumber = ref({
  //安全起飞高度
  min: 2, // 最小值
  max: 1500, // 最大值
});

//飞行速度
const speedNumber = ref({
  //飞行速度
  min: 1,
  max: 15,
});
// 起飞速度
const takeoffspeedNumber = ref({
  min: 1,
  max: 15,
});
// 主航线角度
const flightAngleNumber = ref({
  min: 0,
  max: 359,
});
// 旁向重叠率
const sideOverlapNumber = ref({
  min: 1,
  max: 90,
});
//边距
const sideDistanceNumber = ref({
  min: 0,
  max: 100,
});
//偏航角
const yawNumber = ref({
  min: 0,
  max: 360,
});
//云台俯仰角
const pitchNumber = ref({
  min: -90,
  max: 30,
});
//云台俯仰角度倾斜
const pitchmodeNumber = ref({
  min: -85,
  max: -40,
});
//倾斜航线速度
const tiltSpeedNumber = ref({
  min: 0.1,
  max: 11.5,
});

const shoutFlag = ref(false);
const algorithmFlag = ref(false);
const waypointactionFlag = ref(false);
const flayShow = ref(true); // true 重设起飞点  fALSE取消设置
// const isSetting_type = ref(3);//当前地图点击模式 1起飞点 2编辑区域 3无
const flayoneShow = ref(true); // 参考起飞点未设置
const isResettingTakeoff = ref(false); // 是否正在重设起飞点模式

// const handleBack = () => {
//   router.go(-1);
// };
const handleBack = () => {
  let message = "若未保存数据将失效，确定要返回吗?";
  try {
    ElMessageBox.confirm(message, "提示", {
      type: "success",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      beforeClose: async (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true;
          try {
            await router.go(-1);
            done();
          } catch (error) {
            instance.confirmButtonLoading = false;
            // 如果是取消导航，不显示错误
            if (error !== "cancel") {
              console.error("导航失败:", error);
            }
          }
        } else {
          done();
        }
      },
    });
  } catch (error) {
    // 忽略取消操作的错误
    if (error !== "cancel") {
      ElMessage.error(`退出失败: ${error.message || "未知错误"}`);
      console.error("退出失败:", error);
    }
  }
};

//飞行速度 移除，使用全局航线速度
// const speedClick = (option) => {
//   if (typeof form.speed == "string") {
//     form.speed = parseFloat(form.speed);
//   }
//   const change =
//     {
//       "-": -1,
//       "+": 1,
//     }[option] || 0;
//   form.speed = adjustValue(
//     form.speed,
//     change,
//     1,
//     15
//   );
// };
//高度模式
// const heightClick = (option) => {
//   if (typeof form.height == "string") {
//     form.height = parseFloat(form.height);
//   }
//   const change =
//     {
//       "-1": -1,
//       "+1": 1,
//     }[option] || 0;
//   form.height = adjustValue(
//     form.height,
//     change,
//     25,
//     1500
//   );
//   form_height.value = form.height
// };

// 全局航线速
const flightspeedClick = (option) => {
  if (typeof form.autoFlightSpeed == "string") {
    form.autoFlightSpeed = parseFloat(form.autoFlightSpeed);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.autoFlightSpeed = adjustValue(
    form.autoFlightSpeed,
    change,
    speedNumber.value.min,
    speedNumber.value.max
  );
  form_autoFlightSpeed.value = form.autoFlightSpeed
};
// 主航线角度
const flightAngleClick = (option) => {
  if (typeof form.direction == "string") {
    form.direction = parseFloat(form.direction);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.direction = adjustValue(
    form.direction,
    change,
    flightAngleNumber.value.min,
    flightAngleNumber.value.max
  );
  form_direction.value = form.direction
};
//起飞速度
const globalTransitionalClick = (option) => {
  if (typeof form.globalTransitionalSpeed == "string") {
    form.globalTransitionalSpeed = parseFloat(form.globalTransitionalSpeed);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.globalTransitionalSpeed = adjustValue(
    form.globalTransitionalSpeed,
    change,
    takeoffspeedNumber.value.min,
    takeoffspeedNumber.value.max
  );
};

// 被摄面海拔高度
const takeoffspeedClick = (option) => {
  if (typeof form.globalShootHeight == "string") {
    form.globalShootHeight = parseFloat(form.globalShootHeight);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.globalShootHeight = adjustValue(
    form.globalShootHeight,
    change,
    flayheightNumber.value.min,
    flayheightNumber.value.max
  );
};
// 广角
const wideangleClick = (option) => {
  if (typeof form.wideangle == "string") {
    form.wideangle = parseFloat(form.wideangle);
  }
  const change =
    {
      "-1": -1,
      "-0.1": -0.1,
      "+1": 1,
      "+0.1": 0.1,
    }[option] || 0;
  form.wideangle = adjustValue(form.wideangle, change, 0.89, 53.34);
};
// 红外
const infraredangleClick = (option) => {
  if (typeof form.infraredangle == "string") {
    form.infraredangle = parseFloat(form.infraredangle);
  }
  const change =
    {
      "-1": -1,
      "-0.1": -0.1,
      "+1": 1,
      "+0.1": 0.1,
    }[option] || 0;

  form.infraredangle = adjustValue(form.infraredangle, change, 3.3, 197.81);
};
//安全起飞高度
const safetakeoffaltitudeClick = (option) => {
  if (typeof form.takeOffSecurityHeight == "string") {
    form.takeOffSecurityHeight = parseFloat(form.takeOffSecurityHeight);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;

  form.takeOffSecurityHeight = adjustValue(
    form.takeOffSecurityHeight,
    change,
    flayheightNumber.value.min,
    flayheightNumber.value.max
  );
  form_takeOffSecurityHeight.value = form.takeOffSecurityHeight;
};
//倾斜航线速度
const tiltSpeedClick = (option) => {
  console.log("tiltSpeedClick", option);
  if (typeof form.tiltSpeed == "string") {
    form.tiltSpeed = parseFloat(form.tiltSpeed);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;

  form.tiltSpeed = adjustValue(
    form.tiltSpeed,
    change,
    tiltSpeedNumber.value.min,
    tiltSpeedNumber.value.max
  );
};
// 边距
const sideDistanceClick = (option) => {
  if (typeof form.margin == "string") {
    form.margin = parseFloat(form.margin);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.margin = adjustValue(
    form.margin,
    change,
    sideDistanceNumber.value.min,
    sideDistanceNumber.value.max
  );
};
// 偏航角
const yawClick = (option) => {
  if (typeof form.waypointHeadingAngle == "string") {
    form.waypointHeadingAngle = parseFloat(form.waypointHeadingAngle);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.waypointHeadingAngle = adjustValue(
    form.waypointHeadingAngle,
    change,
    yawNumber.value.min,
    yawNumber.value.max
  );
};
// 云台俯仰角
const pitchClick = (option) => {
  if (option == "-") {
    if (form.pitch <= pitchNumber.value.max) {
      form.pitch -= 1;
    }
  } else {
    if (form.pitch >= pitchNumber.value.min) {
      form.pitch += 1;
    }
  }
};
// 云台俯仰角度倾斜
const pitchmodeClick = (option) => {
  if (option == "-") {
    if (form.gimbalPitchAngle <= pitchmodeNumber.value.max) {
      form.gimbalPitchAngle -= 1;
    }
  } else {
    if (form.gimbalPitchAngle >= pitchmodeNumber.value.min) {
      form.gimbalPitchAngle += 1;
    }
  }
};
// 旁向重叠率
const sideOverlapClick = (option) => {
  if (typeof form.overlapW == "string") {
    form.overlapW = parseFloat(form.overlapW);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.overlapW = adjustValue(
    form.overlapW,
    change,
    sideOverlapNumber.value.min,
    sideOverlapNumber.value.max
  );
};
// 航向重叠率
const yawOverlapClick = (option) => {
  if (typeof form.overlapH == "string") {
    form.overlapH = parseFloat(form.overlapH);
  }
  const change =
    {
      "-": -1,
      "+": 1,
    }[option] || 0;
  form.overlapH = adjustValue(
    form.overlapH,
    change,
    sideOverlapNumber.value.min,
    sideOverlapNumber.value.max
  );
};
// 航向重叠率(倾斜)
const yawOverlapTiltClick = (option) => {
  if (option == "-") {
    if (form.yawOverlapTilt <= sideOverlapNumber.value.max) {
      form.yawOverlapTilt -= 1;
    }
  } else {
    if (form.yawOverlapTilt >= sideOverlapNumber.value.min) {
      form.yawOverlapTilt += 1;
    }
  }
};
// 旁向重叠率(倾斜)
const sideOverlapTiltClick = (option) => {
  if (option == "-") {
    if (form.sideOverlapTilt <= sideOverlapNumber.value.max) {
      form.sideOverlapTilt -= 1;
    }
  } else {
    if (form.sideOverlapTilt >= sideOverlapNumber.value.min) {
      form.sideOverlapTilt += 1;
    }
  }
};
// 高度模式
const getheightmode = (val) => {
  form.heightMode = val;
  // if (val == 0) {
  //   form.height = 120;
  // } else if (val == 1) {
  //   form.height = 200;
  // } else {
  //   form.height = 250;
  // }
  // form_height.value = form.height
};
// 把秒改成分秒
const executeTime_formatTime = computed(() => {
  // 确保输入是数字且非负数
  const sec = Math.max(0, parseInt(form.executeTime) || 0);
  // 计算分钟和秒数
  const minutes = Math.floor(sec / 60);
  const remainingSeconds = sec % 60;
  // 格式化为 M:S（秒数保持两位数）
  return `${minutes}min${remainingSeconds.toString().padStart(2, '0')}`;
})
// 获取区域面积
const getArea = (data) => {
  // console.log("getArea", val);
  form.areas = data.coverageArea;
  form.totalDistance = data.totalDistance;
  form.executeTime = data.estimatedFlightTime;
  form.totalPhotos = data.estimatedPhotoCount;
};

// 保存航线设置
const saveline = async () => {
  ElMessage({
    plain: true,
    message: "保存成功",
    type: "success",
  });
};
const oneSetTakeoffMode = () => {
  if (mapRef.value) {
    mapRef.value.enterSetTakeoffMode();
  }
}
const changeflayShow = (num) => {
  if (mapRef.value) {
    if (num == 1) {
      // 重设起飞点
      isResettingTakeoff.value = true;
      mapRef.value.enterSetTakeoffMode();
    } else if (num == 2) {
      // 取消重设起飞点
      isResettingTakeoff.value = false;
      mapRef.value.exitSetTakeoffMode();
    }
  }
}
// 点击起飞点回调
const getstartMarker = (val) => {
  form.takeOffRefPoint =
    val[0] + "," + val[1] + "," + form.takeOffSecurityHeight;
  flayoneShow.value = false
  isResettingTakeoff.value = false;
};
// 获取所有数据
const getallData = (data) => {
  const { coordinatePointReqList, waypoints } = data;
  form.coordinatePointReqList = coordinatePointReqList;
  form.waypoints = waypoints;
  // form.takeOffRefPoint = startprint.toString()
  // allData.value = val;
  // form.coordinatePointReqList = val.map((coord, index) => ({
  //   longitude: coord[0],
  //   latitude: coord[1],
  //   height: coord[2],
  // }));
};

// 获取总距离
const gettotalDistance = (val) => {
  // formyaw.totalDistance = val;
};


// 保存数据
const updatemap = () => {
  // airlineList.value[waypointIndex.value].positionType = formyaw.map;
};

let wideType = 0;
let zoomType = 0;
const isSuccess = ref(false);
// 设置镜头（至少选择一个）
const set_TypeSupport = (num) => {
  if (num === 1) {
    if (form.irTypeSupport == 1) {
      if (form.wideTypeSupport === 1) {
        form.wideTypeSupport = 0
      } else {
        form.wideTypeSupport = 1
      }
    }
  } else if (num === 2) {
    if (form.wideTypeSupport == 1) {
      if (form.irTypeSupport === 1) {
        form.irTypeSupport = 0
      } else {
        form.irTypeSupport = 1
      }
      // form.irTypeSupport = !form.irTypeSupport
    }
  }
}
const saveAll = async () => {
  if (form.takeOffRefPoint == "") return ElMessage.error("请设置起飞点");
  // 验证镜头至少选择一个
  if (form.wideTypeSupport == 0 && form.irTypeSupport == 0)
    return ElMessage.error("请至少选择一种镜头");
  // 深拷贝，避免响应式对象导致的循环引用
  const params = JSON.parse(JSON.stringify(form));
  try {
    await ruleFormRef.value?.validate();
    const response = await addPlanarAirline(params);
    // 检查响应状态
    if (response.code === 200) {
      ElMessage.success("保存成功");
      isSuccess.value = true;
      // 返回列表
      router.go(-1);
    } else {
      // 接口返回业务错误
      const errorMsg = response.message || response.msg || "保存失败";
      ElMessage.error(errorMsg);
    }
  } catch (err) {
    // 处理HTTP错误（如500、404等）
    if (err.response) {
      const { status, data } = err.response;
      let errorMsg = "操作失败";

      if (status === 500) {
        errorMsg = data?.message || data?.msg || "服务器内部错误";
      } else if (status === 404) {
        errorMsg = "接口不存在";
      } else if (status === 403) {
        errorMsg = "权限不足";
      } else if (status === 401) {
        errorMsg = "未授权访问";
      } else {
        errorMsg = data?.message || data?.msg || `请求失败 (${status})`;
      }

      ElMessage.error(errorMsg);
    } else if (err.request) {
      // 网络错误
      ElMessage.error("网络连接失败，请检查网络设置");
    } else {
      // 其他错误
      ElMessage.error(err.message || "操作失败");
    }
  }
};

// 通知地图组件更新
const emitMapUpdate = () => {
  // 触发地图更新事件
  // 这里可以通过事件总线或者直接调用地图组件的方法
  console.log("触发地图更新事件");
};

// 地图组件引用
const mapRef = ref(null);

const saveAllEdit = async (rrrrrref) => {
  if (!ruleForm.airlineNameData) {
    ElMessage({
      message: '请填写航线名称',
      type: 'warning',
      grouping: true,
    })
    return;
  }
  isSuccess.value = false;
  // if (flayoneShow.value == true) {
  //   //没有设置起飞点
  //   ElMessage.error("请设置起飞点");
  //   return;
  // }
  // 验证镜头至少选择一个
  // if (form.lens.length === 0) {
  //   ElMessage.error("请至少选择一种镜头");
  //   return;
  // } else {
  // 根据镜头选择设置 wideType 和 zoomType
  // if (form.lens.includes("0") && form.lens.includes("1")) {
  //   // 同时选择广角和红外
  //   wideType = 1;
  //   zoomType = 1;
  // } else if (form.lens.includes("0")) {
  //   // 只选择广角
  //   wideType = 1;
  //   zoomType = 0;
  // } else if (form.lens.includes("1")) {
  //   // 只选择红外
  //   wideType = 0;
  //   zoomType = 1;
  // } else {
  //   // 默认值（理论上不会到达这里，因为至少选一个）
  //   wideType = 0;
  //   zoomType = 0;
  // }
  // const takeOffRefPoint =
  //   allData.value[0].startdata.point[0] +
  //   "," +
  //   allData.value[0].startdata.point[1];
  // 深拷贝，避免响应式对象导致的循环引用
  // const wayPoints = JSON.parse(JSON.stringify(airlineList.value));
  // const time = formattedTotalTime.value;
  let message = "确定保存数据并返回吗?";
  try {
    ElMessageBox.confirm(message, "提示", {
      type: "success",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      beforeClose: async (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true;
          try {
            // await router.go(-1);


            const params = {
              id: route.query.id,
              airlineName: ruleForm.airlineNameData || form.airlineName,
              "areas": form.areas,
              // executeTime: time.value,//执行时间
              executeTime: form.executeTime,//执行时间
              "totalDistance": form.totalDistance,//总距离
              "totalPhotos": form.totalPhotos,//全部照片数量
              takeOffRefPoint: form.takeOffRefPoint, //起飞点
              "irTypeSupport": form.irTypeSupport, //红外类型支持 0不支持 1支持
              wideTypeSupport: form.wideTypeSupport, //广角支持 0不支持 1支持
              collectType: form.collectType, //采集类型 0正射采集 1倾斜采集
              heightMode: form.heightmode,  //航线高度模式  1相对起飞点高度 2相对地面高度 0海拔高度
              height: form.height,
              takeOffSecurityHeight: form.takeOffSecurityHeight, //安全起飞高度
              gimbalPitchAngle: form.gimbalPitchAngle, //云台俯仰角度
              autoFlightSpeed: form.autoFlightSpeed, //全局航线速度
              finishAction: form.destinationtyyes, //无人机完成动作
              elevationOptimizeEnable: form.elevationOptimizeEnable, //是否开启高程优化海拔优化 0不优化 1优化
              globalShootHeight: form.globalShootHeight, //被摄面海拔高度
              margin: form.margin, //边距
              direction: form.direction, //主航线角度
              overlapH: form.overlapH, //航向重叠率
              overlapW: form.overlapW, //旁向重叠率
              waypointHeadingAngle: form.waypointHeadingAngle, //无人机偏航角
              waypointHeadingMode: form.waypointHeadingMode, //飞行器偏航角模式 0沿航线方向 1手动控制
              shootType: form.shootType, //拍照模式  * 0 等时间拍照* 1 等距离拍照
              globalTransitionalSpeed: form.globalTransitionalSpeed, //起飞速度
              wayPoints: form.waypoints,
              coordinatePointReqList: form.coordinatePointReqList,
              brandId: form.brandId,
              seriesId: form.seriesId,
              modelId: form.modelId,
              // airlineType: route.query.airlineType,
              // wideType: wideType, //广角照片
              // zoomType: zoomType, //变焦照片
              // airlineHeightType: form.heightmode, //航线高度模式
              // globalHeight: form.flightaltitude, //飞行高度
              // globalTransitionalSpeed: form.globalTransitionalSpeed, //起飞速度
              // // wayPointType: form.destinationtype, //航点类型
              // outOfControlAction: form.destinationty, //无人机失控动作
              // globalRTHHeight: form.returnaltitude, //返航高度
              // pointNum: airlineList.value.length,
            };
            try {
              await ruleFormRef.value?.validate();
              // const { code, message = "保存失败" } = await editAirline(params);
              const { code, msg = "保存失败" } = await updatePlanarAirline(params);
              instance.confirmButtonLoading = false;
              if (code !== 200) {
                ElMessage.error(msg);
                done();
                return;
              };
              ElMessage.success("保存成功");
              isSuccess.value = true;
              // 返回列表
              router.go(-1);
            } catch (err) {
              console.log(err)
              const errMsg = err.response?.data?.msg || err.message;
              ElMessage.error(`操作失败: ${errMsg}`);
            }

            done();
          } catch (error) {
            instance.confirmButtonLoading = false;
            // 如果是取消导航，不显示错误
            if (error !== "cancel") {
              console.error("导航失败:", error);
            }
          }
        } else {
          done();
        }
      },
    });
  } catch (error) {
    // 忽略取消操作的错误
    if (error !== "cancel") {
      ElMessage.error(`退出失败: ${error.message || "未知错误"}`);
      console.error("退出失败:", error);
    }
  }
  //   }
};
// 将对象数组转换为坐标数组
const convertToCoordinateArray = (objectArray) => {
  return objectArray.map((item) => [item.longitude, item.latitude]);
};
// 获取镜头类型
// const typeSupport_list=ref([])
const isvisable = ref(false);
const get_storageSupport = (list) => {
  // typeSupport_list.value=list
  if (list.indexOf('visable') == -1) {
    isvisable.value = false;
  } else {
    isvisable.value = true;
  }
}
// 详情
const getDetail = async () => {
  const params = {
    id: route.query.id,
  };
  const { data } = await getPlanarAirlineById(params);
  // console.log(data)
  // Object.assign(form, data);
  Object.keys(form).forEach(key => {
    if (key in form && (data[key] || data[key] == 0)) {
      form[key] = data[key]
    }
  })
  if (form.takeOffRefPoint && mapRef.value) {
    mapRef.value.set_takeOffRefPoint();
  }
  if (data.storageSupport) {
    get_storageSupport(data.storageSupport.split(','))
  }
  // console.log(form.height)
  // console.log(data.wideTypeSupport, data.irTypeSupport)
  // form.wideTypeSupport
  // form.irTypeSupport
  // console.log(form.height)
  // console.log(form.takeOffSecurityHeight)
  // console.log(form.autoFlightSpeed)
  // if (form.height) form_height.value = form.height;
  // if (form.takeOffSecurityHeight) form_takeOffSecurityHeight.value = form.takeOffSecurityHeight;
  // if (form.autoFlightSpeed) form_autoFlightSpeed.value = form.autoFlightSpeed;
  // if (form.direction) form_direction.value = form.direction;
  // await nextTick();
  // form.coordinatePointReqList = convertToCoordinateArray(
  //   data.coordinatePointReqList
  // );
  // await nextTick();
  // form.coordinatePointReqList = [{
  //   longitude: 0,
  //   latitude: 0,
  //   height: 0,
  // },]
};

// 飞行时长
const getflighttime = (val) => {
  totalTime.value = 0;
  // 1. 起飞时间计算
  let takeoffTime = 0;

  if (distanceArray.value[0] && form.takeoffspeed) {
    takeoffTime = distanceArray.value[0] / form.takeoffspeed;
    // console.log('起飞时间:', takeoffTime, 's');
  }
  // 2. 起飞点到第一个航点的时间
  let takeoffToFirstWaypointTime = 0;
  if (distanceArray.value[1] && form.takeoffspeed) {
    takeoffToFirstWaypointTime = distanceArray.value[1] / form.takeoffspeed;
    // console.log('起飞点到第一个航点时间:', takeoffToFirstWaypointTime, 's');
  }
  // console.log('waypointFlightTimes',distanceArray.value,val);
  // 3. 航点间飞行时间计算
  let waypointFlightTimes = [];
  // 去掉 distanceArray 前两个，去掉 val 最后一个
  // distanceArray 从索引2开始，对应 val 从索引0开始（但要去掉最后一个）
  for (let i = 0; i < val.length - 1; i++) {
    const distanceIndex = i + 2; // distanceArray 从第三个元素开始
    const waypointItem = val[i];

    if (distanceArray.value[distanceIndex] && waypointItem.waypointSpeed) {
      const waypointTime =
        distanceArray.value[distanceIndex] / waypointItem.waypointSpeed;
      waypointFlightTimes.push({
        waypointIndex: i,
        distance: distanceArray.value[distanceIndex],
        speed: waypointItem.waypointSpeed,
        time: waypointTime,
      });
      // console.log(`航点${i}到航点${i+1}距离: ${distanceArray.value[distanceIndex]}m, 速度: ${waypointItem.waypointSpeed}m/s, 时间: ${waypointTime}s`);
    }
  }

  // 4. 计算每个航点的悬停时间
  let hoverTimes = [];
  for (let i = 0; i < val.length; i++) {
    const waypointItem = val[i];
    let hoverTime = 0;

    // 检查该航点是否有悬停动作（actionType === 1）
    if (waypointItem.actions && Array.isArray(waypointItem.actions)) {
      const hoverAction = waypointItem.actions.find(
        (action) => action.actionType === 1
      );
      if (hoverAction && hoverAction.actionValue) {
        hoverTime = hoverAction.actionValue;
        // console.log(`航点${i}悬停时间: ${hoverTime}s`);
      }
    }
    hoverTimes.push({
      waypointIndex: i,
      hoverTime: hoverTime,
    });
  }
  // 5. 计算总飞行时间（包括悬停时间）
  const totalHoverTime = hoverTimes.reduce(
    (sum, item) => sum + item.hoverTime,
    0
  );
  totalTime.value =
    takeoffTime +
    takeoffToFirstWaypointTime +
    waypointFlightTimes.reduce((sum, item) => sum + item.time, 0) +
    totalHoverTime;
  // console.log('总悬停时间:', totalHoverTime, 's');
  // console.log('总飞行时间:', totalTime.value, 's');
  // console.log('各航点飞行时间:', waypointFlightTimes);
  // console.log('各航点悬停时间:', hoverTimes);
  return {
    takeoffTime,
    takeoffToFirstWaypointTime,
    waypointFlightTimes,
    hoverTimes,
    totalHoverTime,
  };
};
// 获取距离数组
const getdistanceArray = (val) => {
  distanceArray.value = val;
  // 当距离数组更新时，重新计算飞行时长
  if (airlineList.value && airlineList.value.length > 0) {
    getflighttime(airlineList.value);
  }
};
// 转换函数：将所有航点合并成一个 point 数组
const convertToAllData = (waypoints, takeOffRefPoint) => {
  // 安全检查：确保 waypoints 是数组
  if (!waypoints || !Array.isArray(waypoints)) {
    console.warn("convertToAllData: waypoints 不是有效的数组:", waypoints);
    waypoints = [];
  }

  const points = waypoints.map((wp) => [wp.longitude, wp.latitude, wp.height]); // 所有点

  // 处理起飞点数据 - 优先使用保存的位置信息
  let startPoint = [];
  if (form.takeoffLongitude && form.takeoffLatitude) {
    // 使用保存的起飞点位置
    startPoint = [
      form.takeoffLongitude,
      form.takeoffLatitude,
      form.takeOffSecurityHeight || 120,
    ];
  } else if (takeOffRefPoint) {
    // 如果没有保存的位置，使用传入的起飞点
    const coords = takeOffRefPoint
      .split(",")
      .map((coord) => parseFloat(coord.trim()));
    if (coords.length >= 2) {
      // 安全地获取高度，避免 points[0][2] 为空的情况
      const defaultHeight = points.length > 0 ? points[0][2] : 300;
      startPoint = [
        coords[0],
        coords[1],
        form.takeOffSecurityHeight || defaultHeight,
      ];
    }
  }

  return [
    {
      points: points, // 所有点组成的数组 - 修正字段名
      startdata: {
        point: startPoint, // 起始点
      },
    },
  ];
};

// 生命周期
onMounted(() => {
  if (route.query.id) {
    getDetail();
  }
});

onBeforeUnmount(() => { });

// 航线的数值和加减变动
const formValueClick = (item, option, settings) => {
  form[item] = Number(form[item]);
  const step = 1;
  let minnum = settings.min;
  let maxnum = settings.max;
  if (option == "-") {
    let newValue = (form[item] * 10 - step * 10) / 10;
    if (newValue < minnum) {
      form[item] = minnum;
    } else {
      form[item] = newValue;
    }
  } else if (option == "+") {
    let newValue = (form[item] * 10 + step * 10) / 10;
    if (newValue > maxnum) {
      form[item] = maxnum;
    } else {
      form[item] = newValue;
    }
  }
  if (item == "height" || item == "autoFlightSpeed") {
    if (mapRef.value) {
      mapRef.value.setheight(form, true);
    }
  }
  if (item == "takeOffSecurityHeight") {
    if (mapRef.value) {
      mapRef.value.setheight(form, false);
    }
  }
};
const fnumberinput = (item, val, settings) => {
  if (!val && val !== 0) return;
  let str = val.toString().trim().replace(/\s/g, "");
  if (!str && str !== 0 || str == '') {
    form[item] = '';
    return;
  };
  //检查第一位不能是.
  if (str.startsWith('.') && str.length == 1) {
    str = ''; // 移除.
    form[item] = '';
    return
  }
  let result = str.replace(/[^0-9.-]/g, '');
  // 确保负号只出现在开头
  const negativeCount = result.split('-').length - 1;
  if (negativeCount > 1 || (negativeCount === 1 && !result.startsWith('-'))) {
    result = result.replace(/(?!^)-/g, ''); //移除非开头的负号
  }
  // 校验结尾 . 或 -，并检查倒数第二位
  if (result.endsWith('.') || result.endsWith('-')) {
    const secondLastChar = result.length > 1 ? result[result.length - 2] : '';
    if (secondLastChar === '-' || secondLastChar === '.') {
      result = result.substring(0, result.length - 1);
    }
  }
  // 找到第一个点号的位置
  const firstDotIndex = result.indexOf('.');
  if (firstDotIndex !== -1) {
    // 保留第一个点号及其前后的数字，移除多余的点号
    result = result.substring(0, firstDotIndex + 1) + result.substring(firstDotIndex + 1).replace(/\./g, '');
    // 限制小数点后最多一位
    const parts = result.split('.');
    if (parts[1] && parts[1].length > 1) {
      parts[1] = parts[1].substring(0, 1);
      result = parts.join('.');
    }
  }
  let minnum = settings.min;
  let maxnum = settings.max;
  if (!result.endsWith('.') && !result.endsWith('-')) {
    let nnum = parseFloat(result)
    if (nnum < minnum) {
      nnum = minnum;
    }
    if (nnum > maxnum) {
      nnum = maxnum;
    }
    form[item] = nnum
  } else {
    form[item] = result
  }
  if (item == "takeOffSecurityHeight") {
    if (mapRef.value) {
      mapRef.value.setheight(form, false);
    }
  }
}
const fnumberchange = (item, val, settings) => {
  if (!val && val !== 0) {
    if (item == 'direction') {
      form.direction = 0; //主航线角度
    } else if (item == 'height') {
      form.height = 120; //航线高度
    } else if (item == 'takeOffSecurityHeight') {
      form.takeOffSecurityHeight = 120; //安全起飞高度
    } else if (item == 'autoFlightSpeed') {
      form.autoFlightSpeed = 8; //全局航线速度
    }
    return;
  }
  let str = val.toString();
  if (str.startsWith('.') && str.length == 1) {
    str = ''; // 移除.
    form[item] = '';
    return
  }
  let result = str.replace(/[^0-9.-]/g, '');
  // 确保负号只出现在开头
  const negativeCount = result.split('-').length - 1;
  if (negativeCount > 1 || (negativeCount === 1 && !result.startsWith('-'))) {
    result = result.replace(/(?!^)-/g, ''); //移除非开头的负号
  }
  // 校验结尾 . 或 -，并检查倒数第二位
  if (result.endsWith('.') || result.endsWith('-')) {
    const secondLastChar = result.length > 1 ? result[result.length - 2] : '';
    if (secondLastChar === '-' || secondLastChar === '.') {
      result = result.substring(0, result.length - 1);
    }
  }
  // 找到第一个点号的位置
  const firstDotIndex = result.indexOf('.');
  if (firstDotIndex !== -1) {
    // 保留第一个点号及其前后的数字，移除多余的点号
    result = result.substring(0, firstDotIndex + 1) + result.substring(firstDotIndex + 1).replace(/\./g, '');
    // 限制小数点后最多一位
    const parts = result.split('.');
    if (parts[1] && parts[1].length > 1) {
      parts[1] = parts[1].substring(0, 1);
      result = parts.join('.');
    }
  }
  let minnum = settings.min;
  let maxnum = settings.max;
  let nnum = parseFloat(result)
  if (nnum < minnum) {
    nnum = minnum;
  }
  if (nnum > maxnum) {
    nnum = maxnum;
  }
  form[item] = nnum
  if (item == "height" || item == "autoFlightSpeed") {
    if (mapRef.value) {
      mapRef.value.setheight(form, true);
    }
  }
  if (item == "takeOffSecurityHeight") {
    if (mapRef.value) {
      mapRef.value.setheight(form, false);
    }
  }
}



const handlechange = (type) => {
  console.log(type)
  if (type == "height") {
    if (mapRef.value) {
      mapRef.value.get_online_line();
    }
    // console.log(123)
    // if (e) {
    //   form.height = parseFloat(parseFloat(e).toFixed(1));
    //   form_height.value = form.height;
    // } else {
    //   form.height = 25
    //   form_height.value = 25;
    // }
  }
}
const handleBlur = (e, type) => {
  console.log(type)
  // console.log("handleBlur", e, type);
  // 更新航线高度
  if (type == "height") {
    // if (e) {
    //   // form.height = parseFloat(parseFloat(e).toFixed(1));
    //   form.height = form_height.value;
    // } else {
    //   form.height = 25
    //   form_height.value = 25;
    // }
  }
  // 航线飞行速度 移除，使用全局航线速度
  // if (type == "speed") {
  //   form.speed = parseFloat(parseFloat(e).toFixed(1));
  // }
  // 更新起飞高度
  if (type == "takeOffSecurityHeight") {
    if (e) {
      form.takeOffSecurityHeight = parseFloat(parseFloat(e).toFixed(1));
      form_takeOffSecurityHeight.value = form.takeOffSecurityHeight;
    } else {
      form.takeOffSecurityHeight = flayheightNumber.value.min
      form_takeOffSecurityHeight.value = flayheightNumber.value.min;
    }
  }
  // 云台俯仰角度倾斜
  if (type == "gimbalPitchAngle") {
    form.gimbalPitchAngle = parseFloat(parseFloat(e).toFixed(1));
  }
  //全局航线速度
  if (type == "autoFlightSpeed") {
    // form.autoFlightSpeed = parseFloat(parseFloat(e.target.value).toFixed(1));
    if (e) {
      form.autoFlightSpeed = parseFloat(parseFloat(e).toFixed(1));
      form_autoFlightSpeed.value = form.autoFlightSpeed;
    } else {
      form.autoFlightSpeed = speedNumber.value.min
      form_autoFlightSpeed.value = speedNumber.value.min;
    }
  }
  //主航线角度
  if (type == "direction") {
    // form.direction = parseFloat(parseFloat(e.target.value).toFixed(1));
    if (e) {
      form.direction = parseFloat(parseFloat(e).toFixed(1));
      form_direction.value = form.direction;
    } else {
      form.direction = flightAngleNumber.value.min
      form_direction.value = flightAngleNumber.value.min;
    }
  }
  //被摄面海拔高度
  if (type == "globalShootHeight") {
    form.globalShootHeight = parseFloat(parseFloat(e.target.value).toFixed(1));
  }
  //起飞速度
  if (type == "globalTransitionalSpeed") {
    form.globalTransitionalSpeed = parseFloat(
      parseFloat(e.target.value).toFixed(1)
    );
  }
  //旁向重叠率
  if (type == "overlapW") {
    form.overlapW = parseFloat(parseFloat(e.target.value).toFixed(0));
  }
  //航向重叠率
  if (type == "overlapH") {
    form.overlapH = parseFloat(parseFloat(e.target.value).toFixed(0));
  }
  //边距
  if (type == "margin") {
    form.margin = parseFloat(parseFloat(e.target.value).toFixed(0));
  }
  //飞行器偏航角度
  if (type == "waypointHeadingAngle") {
    form.waypointHeadingAngle = parseFloat(
      parseFloat(e.target.value).toFixed(0)
    );
  }
};
// onBeforeRouteLeave((to, from, next) => {
//   const hasUnsavedChanges = airlineList.value.length > 0;

//   if (isSuccess.value) {
//     next(); // 已保存，直接离开
//     return;
//   }

//   if (hasUnsavedChanges) {
//     ElMessageBox.confirm(
//       "返回将退出航线编辑器，您要保存吗？如果不保存，您更改的内容将会丢失。",
//       "提示",
//       {
//         distinguishCancelAndClose: true,
//         confirmButtonText: "保存",
//         cancelButtonText: "不保存",
//         closeOnClickModal: false,
//         type: "warning",
//         buttonSize: "small",
//         customClass: "custom-confirm-box",
//       }
//     )
//       .then(async () => {
//         try {
//           if (route.query.id) {
//             await saveAllEdit();
//           } else {
//             await saveAll();
//           }
//           if (isSuccess.value === true) {
//             next(); // ✅ 只跳转一次
//           }
//         } catch (error) {
//           ElMessage.error("保存失败，请重试");
//           next(false);
//         }
//       })
//       .catch((action) => {
//         if (action === "cancel") {
//           next(); // 不保存直接离开
//         } else {
//           next(false); // 阻止跳转
//         }
//       });
//   } else {
//     next(); // 没有未保存内容，直接离开
//   }
// });
</script>

<style scoped lang="scss">
.pageStyle {
  position: relative;
  height: calc(100vh - 88px);
  color: #303133;
  user-select: none;
}

.map-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 22%;
  height: calc(100vh - 88px);
  padding-top: 20px;
  background-color: rgb(255 255 255 / 70%);
}

.airline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;

  img {
    width: 46px;
    height: 34px;
    padding: 5px 11px;
    background-color: rgb(242 242 242 / 14.9%);
    border-radius: 3px;
  }
}

.airline-distance {
  display: flex;
  padding: 10px 0;
  margin-bottom: 8px;
  text-align: center;
  background: #fff;
  border: 1px solid #dcdfe6;

  .flex-1 {
    border-right: 1px solid #e4e7ed;
  }

  .flex-1:last-child {
    border-right: none;
  }
}

.airline-setup {
  display: flex;
  width: 100%;
  margin: 10px 0;
  border: 1px solid #dcdfe6;

  div {
    width: 50%;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .tab-item {
    background: #fff;
    border-right: none;
    border-radius: 4px 0 0 4px;
  }

  .tab-itemBg {
    color: #1989fa;
  }
}

.airline-fly {
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin: 8px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  img {
    width: 16px;
    height: 13px;
    margin-right: 4px;
  }

  .text {
    color: #1989fa;
  }
}

.airline-img {
  padding: 10px;
  margin: 8px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .el-checkbox {
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #303133;
  }

  .btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
    font-size: 14px;

    p {
      width: 30%;
      // flex: 1;
      height: 32px;
      line-height: 32px;
      color: #303133;
      text-align: center;
      background: #fff;
      border: 1px solid #dcdfe6;
      border-radius: 4px;

      span {
        padding: 0 6px;
      }
    }

    p:first-child {
      margin: 0 8px 8px 0;
    }

    .activeBtn {
      color: #fff;
      background: #1989fa;
      border: 1px solid #1989fa;
    }
  }

  .btnF {
    display: flex;
    margin: 10px 0;
    font-size: 14px;
    user-select: none;

    p {
      flex: 1;
      height: 32px;
      line-height: 32px;
      color: #303133;
      text-align: center;
      background: #fff;
      border: 1px solid #dcdfe6;
      cursor: pointer;
    }

    p:first-child {
      // margin: 0 8px 8px 0;
      border-right: none;
    }

    .activeBtnF {
      color: #2f69eb;
      // border-bottom-color: transparent;
      // background: #1989fa;
    }
  }

  .zbtnF {
    p {
      span {
        white-space: nowrap;
      }
    }
  }

  .border-bottom {
    p:first-child {
      border-bottom: 1px solid #dcdfe6;
    }

    .activeBtnF {
      color: #2f69eb;
      // border-bottom: 1px solid #dcdfe6;
    }
  }

  .select {
    width: 100%;
    margin-top: 10px;

    :deep(.el-select__wrapper) {
      color: #303133;
      background: transparent;
    }
  }

  .airBtn {
    width: 100%;
    margin-top: 10px;
    font-weight: normal;
    color: #303133;
    background: #f0f2f5;
    border: none;
    border-radius: 4px;
  }
}

.airline-img-height {
  padding: 10px;
  margin: 8px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .el-checkbox {
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #303133;
  }

  .btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
    font-size: 14px;

    p {
      // flex: 1;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background-color: rgb(242 242 242 / 14.9%);
      border: 1px solid #dcdfe6;
      border-radius: 4px;

      span {
        padding: 0 6px;
      }
    }

    p:first-child {
      margin: 0 8px 8px 0;
    }

    .activeBtn {
      color: #1989fa;
      border: 1px solid #1989fa;
      // background-color: rgb(0 204 255 / 20.8%);
    }
  }

  .select {
    width: 100%;
    margin-top: 10px;

    :deep(.el-select__wrapper) {
      color: #303133;
      background: transparent;
    }
  }

  .airBtn {
    width: 100%;
    margin-top: 10px;
    font-weight: normal;
    color: #303133;
    background: #f0f2f5;
    border: none;
    border-radius: 4px;
  }
}

.save {
  width: calc(100% - 16px);
  height: 40px;
  margin: 8px;
  background: #1989fa;
  border-radius: 4px;
}

.airline-setting {
  position: relative;
  justify-content: space-between;

  :deep(.address .el-input__wrapper) {
    height: 32px;
    line-height: 32px;
  }

  .du {
    position: absolute;
    top: 0;
    right: -8px;
  }
}

.airline-slider {
  display: flex;
  align-items: center;
  margin: 10px 0;

  .el-button {
    width: 16px;
    height: 16px;
    padding: 0 5px 2px;
    font-size: 16px;
    color: #fff;
    background: #c0c4cc;
    border: none;
    border-radius: 50%;
  }

  :deep(.el-slider__button) {
    width: 11px;
    height: 11px;
    border: none;
  }

  .text {
    width: 40px;
    height: 24px;
    margin-left: 5px;
    font-size: 12px;
    line-height: 24px;
    color: #303133;
    text-align: center;
    cursor: pointer;
    background: #e4e7ed;
    border-radius: 2px;
  }

  :deep(.el-input__wrapper) {
    height: 24px;
    line-height: 24px;
    border-radius: 2px;
  }
}

// }

.search-input {
  box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
}

.search-results {
  position: absolute;
  top: 80px;
  left: 20px;
  z-index: 999;
  width: 400px;
}

.result-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.result-item:hover {
  background-color: #f5f5f5;
}

.result-name {
  margin-bottom: 5px;
  font-weight: bold;
}

.result-address {
  font-size: 12px;
  color: #666;
}

.result-distance {
  margin-top: 5px;
  font-size: 12px;
  color: #409eff;
}

.airline-stoproute {
  padding: 12px;
  margin: 8px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .blue {
    color: #409eff;
  }

  .bgimg {
    margin: 0 10px 0 0;
    background-color: rgb(242 242 242 / 14.9%);
    border: 1px solid #dcdfe6;
    border-radius: 2px;

    img {
      width: 32px;
    }
  }

  .bgimg:nth-child(4n) {
    margin: 0;
  }

  .text {
    height: 34px;
    font-size: 14px;
    line-height: 34px;
  }
}

.airline-wavy {
  padding: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  background: #f0f2f5;
  // border: 1px solid #dcdfe6;
  border-radius: 5px;

  &:nth-child(2) {
    margin-top: 5px;
  }

  &:last-child {
    margin-bottom: 0; // 覆盖默认的 margin-bottom
  }

  img {
    width: 15px;
    height: 14px;
    margin-right: 5px;
  }
}

:deep(.el-select__selected-item.el-select__placeholder) {
  color: #303133;
}

:deep(.el-radio) {
  font-weight: normal;
  color: #303133;
}

:deep(.el-checkbox) {
  font-weight: normal;
  color: #303133;
}

.m-l-5 {
  display: inline-block;
  margin-left: 5px;
  width: 20px;
}

:deep(.el-input__wrapper) {
  height: 20px;
  background: #e4e7ed;
  border-radius: 4px;
  box-shadow: none;
}

.bgimg {
  position: relative;
  display: inline-block;
}

.bgimg:hover::after {
  // position: absolute;
  // bottom: 100%;
  // left: 50%;
  // padding: 6px 10px;
  // margin-bottom: 5px;
  // font-size: 14px;
  // white-space: nowrap;
  // content: '拍摄模式';
  // background: #fff;
  // border: 1px solid #e4e7ed;
  // border-radius: 4px;
  // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
  // transform: translateX(-50%);
}

.el-slider {
  margin: 0 10px;

  :deep(.el-slider__bar) {
    background: linear-gradient(79deg, #00ccd0 0%, #3a6af0 100%);
    box-shadow: 0 0 8px 0 rgb(97 137 202 / 43%);
  }
}

.tips {
  position: absolute;
  top: -30px;
  width: 100%;
  min-width: 95px;
  padding: 3px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
}

:deep(.el-checkbox__label) {
  padding-left: 4px;
}

:deep(.custom-confirm-box) {
  .el-message-box__btns .el-button--small {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.backbtn {
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #2f69eb;
  border-radius: 4px;
}

.disabledText {
  cursor: not-allowed !important;
  opacity: 0.5;
}

.height-btn {
  height: 30px;
  padding: 0 10px;
  margin: 10px 0;
  line-height: 30px;
  background: #f0f2f5;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>